<template>
  <div class="app-container">

    <el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body>
      <div id="printArea">
        <el-form ref="form" :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="检验单编号" prop="oqcCode">
                <el-input
                  v-model="form.oqcCode"
                  readonly />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="检验单名称" prop="oqcName">
                <el-input
                  v-model="form.oqcName"
                  readonly/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="产品编码" prop="itemCode">
                <el-input v-if="form.oqcId ==null " readonly v-model="form.itemCode" placeholder="请选择产品" >
                </el-input>
                <!--如果已经保存过，则产品不允许再修改，需要修改就删除重做-->
                <el-input v-else v-model="form.itemCode" readonly/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="产品名称" prop="itemName">
                <el-input :readonly="optType === 'view'" v-model="form.itemName"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="单位" prop="unitOfMeasure">
                <el-input :readonly="optType === 'view'" v-model="form.unitOfMeasure"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="规格" prop="specification">
                <el-input :readonly="optType === 'view'" v-model="form.specification"  />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="型号" prop="specification">
                <el-input :readonly="optType === 'view'" v-model="form.itemModel" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="颜色" prop="specification">
                <el-input :readonly="optType === 'view'" v-model="form.itemColor"  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="品牌" prop="specification">
                <el-input :readonly="optType === 'view'" v-model="form.itemBrand"  />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="技术要求" prop="specification">
                <el-input :readonly="optType === 'view'" v-model="form.itemTechReq" />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户编号" prop="clientCode">
                <el-input v-model="form.clientCode" readonly >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="客户名称" prop="clientName">
                <el-input readonly v-model="form.clientName" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="批次号" prop="batchCode">
                <el-input v-model="form.batchCode" readonly />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="发货数量" prop="quantityOut">
                <el-input v-model="form.quantityOut" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检测数量" prop="quantityCheck">
                <el-input
                  v-model="form.quantityCheck"
                  placeholder="请输入本次检测数量"
                  readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="不合格数量" prop="quantityUnqualified">
                <el-input
                  v-model="form.quantityUnqualified"
                  placeholder="请输入不合格数量"
                  readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="出货日期" prop="outDate">
                <el-input
                  v-model="form.outDate"
                  placeholder="请选择出货日期"
                  readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检测日期" prop="inspectDate">
                <el-input
                  v-model="form.inspectDate"
                  placeholder="请选择检测日期"
                  readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检测结果" prop="checkResult">
                <el-select v-model="form.checkResult" placeholder="请选择检测结果">
                  <el-option
                    v-for="dict in dict.type.mes_qc_result"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    v-if="(optType === 'view' || dict.value !== 'EXEMPT')"
                    :disabled="optType === 'view'"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="检测人员" prop="inspector">
                <el-input v-model="form.inspector" placeholder="请输入检测人员" readonly>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :readonly="optType === 'view'" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="center">统计结果</el-divider>
          <div class="statistic-section">
            <el-row>
              <el-col :span="8">
                <el-form-item label="致命缺陷数" prop="crQuantity">
                  <el-input readonly v-model="form.crQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="严重缺陷数" prop="majQuantity">
                  <el-input readonly v-model="form.majQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="轻微缺陷数" prop="minQuantity">
                  <el-input readonly v-model="form.minQuantity" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="致命缺陷率" prop="crQuantity">
                  <el-input readonly v-model="form.crRate" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="严重缺陷率" prop="majRate">
                  <el-input readonly v-model="form.majRate" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="轻微缺陷率" prop="minRate">
                  <el-input readonly v-model="form.minRate" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>


        </el-form>
        <el-divider v-if="form.oqcId !=null" content-position="center">检测项</el-divider>
        <div class="inspection-section">
          <el-card shadow="always" v-if="form.oqcId !=null" class="box-card">
            <Oqcline ref=line :oqcId="form.oqcId" :optType="optType" @handleReview="handleReview"></Oqcline>
          </el-card>
        </div>

      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="print">打印</el-button>
       <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import printJS from "print-js";
import Oqcline from "./line.vue";
import { listOqc, getOqc, delOqc, addOqc, updateOqc } from "@/api/mes/qc/oqc";

export default {
  name: "OqcPrint",
  dicts: ['mes_order_status','mes_qc_result'],
  components: {
    Oqcline,
    printJS,
  },
  data() {
    return {
      //自动生成编码
      autoGenFlag:false,
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 出货检验单表格数据
      oqcList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        oqcId: null,
        oqcCode: null,
        oqcName: null,
        templateId: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        batchCode: null,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantityMinCheck: null,
        quantityMaxUnqualified: null,
        quantityOut: null,
        quantityCheck: null,
        quantityUnqualified: null,
        quantityQuanlified: null,
        crRate: null,
        majRate: null,
        minRate: null,
        crQuantity: null,
        majQuantity: null,
        minQuantity: null,
        checkResult: null,
        outDate: null,
        inspectDate: null,
        inspector: null,
        status: null,
      },
      // 表单参数
      form: {},
    }
  },
  methods: {
    // 初始化
    init(id) {
      this.open = true;
      this.queryParams.oqcId = id;
      this.getList(id);
    },
    /** 查询出货检验单列表 */
    getList(id) {
      this.loading = true;
      getOqc(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "打印出货检验单信息";
        this.optType = 'view';
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        oqcId: null,
        oqcCode: null,
        oqcName: null,
        templateId: null,
        sourceDocId: null,
        sourceDocType: null,
        sourceDocCode: null,
        sourceLineId: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        batchCode: null,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantityMinCheck: null,
        quantityMaxUnqualified: null,
        quantityOut: null,
        quantityCheck: null,
        quantityUnqualified: null,
        quantityQuanlified: null,
        crRate: null,
        majRate: null,
        minRate: null,
        crQuantity: null,
        majQuantity: null,
        minQuantity: null,
        checkResult: null,
        outDate: null,
        inspectDate: null,
        inspector: null,
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
      this.fileList = [];
    },
    // 结果统计回显
    handleReview() {
      getOqc(this.form.oqcId).then(response => {
        this.form = response.data;
      });
    },
    print() {
      printJS({
        type: 'html',
        printable: 'printArea',
        documentTitle: '出货检验单',
        header: '出货检验单',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:5px;font-weight: 300;',
        style: `@page {
                  size: A4 landscape !important; /* 强制 A4 横向 */
                  margin: 2cm 1.5cm 2cm 1.5cm !important; /* 上右下左边距 */
                }
                @media print {
                  body {
                      -webkit-print-color-adjust: exact !important; /* 让颜色更准确 */
                      print-color-adjust: exact !important;
                  }
                  .section {
                    break-inside: avoid !important;
                  }
                  .el-form-item__content, .el-table .cell {
                    white-space: nowrap; /* 不允许文本换行 */
                    overflow: hidden; /* 超出部分隐藏 */
                    text-overflow: ellipsis; /* 超出部分用省略号表示 */
                  }
                  .el-table td, .el-table th {
                    box-sizing: border-box;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    position: relative;
                    padding: 0;
                    height: 70px; /* 增加高度 */
                    max-height: 70px;
                  }
                  .statistic-section, .inspection-section {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 20px; /* 增加段落间距 */
                  }
                  .el-divider__text {
                    white-space: nowrap !important; /* 强制不换行 */
                    overflow: hidden; /* 超出部分隐藏 */
                    text-overflow: ellipsis; /* 超出部分用省略号表示 */
                    display: inline-block; /* 确保为行内块级元素 */
                    max-width: 100%; /* 最大宽度为100% */
                  }
                  .el-divider {
                    width: 100%; /* 确保 divider 宽度为100% */
                    margin: 20px 0; /* 上下外边距 */
                  }
                }
                .divider {
                  display: flex; /* 使用Flexbox布局 */
                  align-items: center; /* 垂直居中对齐 */
                  margin: 20px 0; /* 上下外边距 */
                }

                .divider::before,
                .divider::after {
                  content: ""; /* 伪元素内容为空 */
                  flex: 1; /* 伸展占据剩余空间 */
                  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
                }
                .label {
                  display: flex;
                  padding: 10px 10px !important;
                  border: 1px solid #d3d3d3; /* 蓝色边框 */
                  border-radius: 10px; /* 圆角 */
                  background-color: #fff; /* 白色背景 */
                  color: #1b9aee; /* 蓝色字体 */
                  font-family: "苹方 常规", "苹方", sans-serif;
                  font-weight: 700;
                  font-style: normal;
                  font-size: 24px;
                  text-align: center;
                  line-height: 20px;
                }
                .noprint{
                  display:none !important;
                }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1960
      });
    },
  }
}
</script>

<style scoped>
.el-card {
  page-break-inside: avoid; /* 避免卡片内容被分页 */
}

.el-table {
  page-break-inside: auto; /* 允许表格内容分页 */
  break-inside: auto;
}

.el-table::before {
  display: none; /* 移除表格底部的多余线条 */
}

.el-table__body-wrapper {
  overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>
